<template>
	<view class="uni_box home">
		<navbar title='抽成设置'>
		</navbar>
		<view class="content">
			<view class="chouone" v-if="content1">
				{{content1}}
			</view>
			<text class="shename" v-if="content2">{{content2}}</text>
			<view class="chouset">
				<view class="cleft">
					<u-input v-model="bfb" type="text" :border="false" placeholder="请输入"/>
				</view>
				<view class="right" @click="shezhi">
					确认设置
				</view>
			</view>
			<view class="chougu">
				<view class="guone">
					<text class="guname">固定金额设置</text>
					<view class="gulist">
						<view class="guitem">
							当前任务
						</view>
						<view class="guitem">
							自身佣金
						</view>
						<view class="guitem">
							下级佣金
						</view>
						<view class="guitem">
							操作
						</view>
					</view>
				</view>
				<view class="guone twoitem" v-for="(item,index) in list" :key="index">
					<view class="bview">
						<image class="icon_rw" src="/static/img/icon_rw.png"></image>
						<text class="gunameone">{{ item.title }}</text>

					</view>
					<view class="gulist">
						<view class="guitem txt">
							{{item.list.title}}
						</view>
						<view class="guitem txt">
							{{item.list.shouyi}}
						</view>
						<view class="guitem txt">
							<u-input v-model="item.list.child_shouyi" type="text" :border="false" placeholder="请输入"/>
						</view>
						<view class="baocun" @click="caoClick(item,index)">
							操作
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				content1:'',
				content2:'',
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				bfb:0,
			}
		},
		onLoad() {
			this.getxieyi()
			this.getxieyi2()
			this.getList()
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getList(){//列表数据
				let res = await this.$u.api.getTaskListByChou({
					page:this.page,
				});
				this.last_page = res.lastpage;
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(this.page >= this.last_page){
					this.status = 'nomore';
				}
				
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			async getxieyi(){
				let res = await this.$u.api.getContent({
					code:'ccdbwa'
				});
				this.content1 = res.content
			},
			async getxieyi2(){
				let res = await this.$u.api.getContent({
					code:'chouchengwenzi'
				});
				this.content2 = res.content
			},
			async shezhi(){
				let res = await this.$u.api.setTaskBfb({
					bfb:this.bfb
				});
				this.$u.toast("设置成功");
				this.getClear()
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			async caoClick(item,index){
				let res = await this.$u.api.setTaskShouyi({
					id:item.list.id,
					price:item.list.child_shouyi
				});
				this.$u.toast("设置成功");
				this.getClear()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		min-height: 100vh;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 100rpx;
		.chouone{
			padding: 20rpx ;
			background: rgba(58,166,246,0.1);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		}
		.shename{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			display: block;
			margin: 20rpx 0;
		}
		.chouset{
			display: flex;
			flex-direction: row;
			align-items: center;
			.cleft{
				padding:10rpx 30rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				margin-right: 20rpx;
				// height: 80rpx;
				flex: 1;
			}
			.right{
				margin-left: auto;
				width: 180rpx;
				height: 80rpx;
				background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
		.chougu{
			display: flex;
			flex-direction: column;
			
		}
		.guone{
			display: flex;
			flex-direction: column;
			// margin-top: 40rpx;
			border-bottom: 1rpx solid #eee;
			padding: 30rpx 0;
			.bview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				.icon_rw{
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
				.gunameone{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
			.guname{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				display: block;
				margin-bottom: 20rpx;
			}
			.gulist{
				display: flex;
				flex-direction: row;
				
				.guitem{
					flex: 1;
					background: #F5F5F5;
					border: 1rpx solid #CCCCCC;
					display: flex;
					padding: 18rpx 8rpx;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					text-align: center;
					// padding: 0 8rpx;
				}
			}
		}
		.twoitem{
			/deep/.u-input__input{
				min-height: 15px !important;
			}
			.gulist{
			  .guitem{
				background: #fff;
				padding: 15rpx 8rpx;
				color: #666;
				display: block;
				line-height: 20px;
			  }	
			}
			.baocun{
				flex: 1;
				display: flex;
				padding: 18rpx 0;
				align-items: center;
				justify-content: center;
				margin: 0 0 0  20rpx;
				height: 65rpx;
				background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
	
</style>
